<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmAsignarPerfil:panPerfiles" widgetVar="blkPanelUsuPerfil" >
        Espere mientras se cargan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <p:blockUI block=":frmAsignarPerfil" widgetVar="blkPanelAsignarPerfil" >
        Espere mientras se procesan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <style type="text/css">
        .ui-picklist-source a.ui-commandlink{
            display: none;
        }
        .ui-picklist .ui-picklist-list {
            width: 250px !important;
        } 
    </style>
    <script type="text/javascript">
        function procesaPerfilSeleccionado(){
            var id=$('li.ui-state-highlight').attr('data-item-value');
            enviaSeleccionado([{name:'id', value:id}]);
        }
    </script>
    <h:form id="frmAsignarPerfil" onkeypress="if (event.keyCode == 13) return false;">
        <p:panel>
            <table style="width:100%;" >
                <thead>
                    <tr>
                        <td>
                            <table width="100%" cellpadding="5" cellspacing="8" style="width: 380px;">
                                <tr>
                                    <td style="width: 100px;"><h:outputText value="Usuario :"/> </td>
                                    <td>
                                        <p:inputText value="#{usuarioController.bean.txtNombres} #{usuarioController.bean.txtApellidoPaterno} #{usuarioController.bean.txtApellidoMaterno}" 
                                                     style="width: 300px;" disabled="true" styleClass="disabled">
                                        </p:inputText>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>  
                <tbody>
                    <tr>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="height: 310px;width: 360px; overflow: hidden;float: left;">
                                <p:tree id="docTree" value="#{usuarioController.moduloTree}" var="per" style="width: 350px;height: 306px;overflow:hidden;" 
                                        selectionMode="single" selection="#{usuarioController.selectedModuloNode}" 
                                        dynamic="true"> 
                                    <p:ajax event="select" update=":frmAsignarPerfil:docTree, :frmAsignarPerfil:panPerfilesTmp" 
                                            oncomplete="blkPanelUsuPerfil.hide();"
                                            onstart="blkPanelUsuPerfil.show();" listener="#{usuarioController.onNodeSelectActivos}" /> 
                                    <p:treeNode expandedIcon="ui-icon-folder-open" 
                                                collapsedIcon="ui-icon-folder-collapsed" >  
                                        <h:outputText value="#{per.txtModulo}" /> 
                                    </p:treeNode>  
                                </p:tree>
                            </div>
                            <div style="height: 310px;width: 570px;float: left;">
                                <p:panel id="panPerfiles" style="float: left;width: 570px;height: 300px;">
                                    <h:panelGrid id="panPerfilesTmp" style="width: 440px;">
                                        <p:pickList id="pickList" value="#{usuarioController.perfiles}" var="perfilUsu" 
                                                    itemLabel="#{perfilUsu.txtPerfil}" itemValue="#{perfilUsu.id}"
                                                    addAllLabel="Agregar Todos" addLabel="Agregar" removeLabel="Quitar" removeAllLabel="Quitar Todos"
                                                    converter="#{perfilUsu}" >
                                            <f:facet name="sourceCaption">Perfiles Disponibles</f:facet>  
                                            <f:facet name="targetCaption">Perfiles Asignados</f:facet>
                                            <p:ajax event="transfer" oncomplete="blkPanelUsuPerfil.hide()" onstart="blkPanelUsuPerfil.show()" />
                                            <p:column style="width:90%">  
                                                #{perfilUsu.txtPerfil}
                                            </p:column>
                                            <p:column style="width:10%"> 
                                                <p:commandLink onclick="procesaPerfilSeleccionado()">
                                                    <li style="width: 18px;height: 18px;padding: 0px;margin: 0px;" class="ui-state-default ui-corner-all" title="Personalizar"><span class="ui-icon ui-icon-unlocked"></span></li>
                                                </p:commandLink>
                                            </p:column> 
                                        </p:pickList>
                                    </h:panelGrid>
                                </p:panel>
                                <p:remoteCommand name="enviaSeleccionado" 
                                         actionListener="#{usuarioController.personalizaPerfil()}"
                                         update=":dlgDetallePerfil, :frmDetallePerfil, :frmAsignarPerfil:msjConfigPerfiles" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p:panel>
        <p:toolbar>
            <p:toolbarGroup align="right">
                <p:commandButton icon="ui-icon-disk" value="Grabar" style="margin-right: 40px;" 
                                 actionListener="#{usuarioController.guardarUsuarioPerfil()}" 
                                 update=":frmAsignarPerfil:msjConfigPerfiles, :frmAsignarPerfil:panPerfilesTmp" 
                                 oncomplete="blkPanelAsignarPerfil.hide()" onstart="blkPanelAsignarPerfil.show()"/>
                <p:commandButton icon="ui-icon-close" value="Cerrar" process="@this" oncomplete="asignaPerfil.hide()" 
                                 actionListener="#{usuarioController.limpiraPersonalizarPerfil()}"/>
            </p:toolbarGroup>
        </p:toolbar>
        <p:messages id="msjConfigPerfiles" showDetail="true" showSummary="false"/>
    </h:form>
</ui:composition>